<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change Password Page</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css"/>
    <style>
        h1 {
            text-align: center;
        }

        #change_pass_form_container {
            margin: 0 auto;
            width: 380px;
            text-align: center;
            font-size: 22px;
        }

    </style>
</head>
<body>

<div id="container">
    <?php readfile("../htmls/header.html") ?>
    <div id="body">

        <section>
            <fieldset id="change_pass_form_container">
                <legend>Change Password</legend>
                <form id='change_pass_form' action="reset_handler.php" method='post'>

                    <br>
                    New password: <input name='password' id="input_password" type='password' required="required"
                                     pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"/><br>
                    <br>
                    <br>

                    <input name="change_pass_token" type="hidden" value="<?php echo $_SESSION['change_pass_token'] ?>"/>

                    <input class="button" type='submit' value="submit">
                </form>
            </fieldset>
        </section>
    </div>
    <?php readfile("../htmls/footer.html") ?>
</div>
<script>
    document.getElementById("input_password").oninput = function () {
        this.setCustomValidity("");
    }

    document.getElementById("input_password").oninvalid = function () {
        this.setCustomValidity('Password should contain minimum 8 characters at least 1 Alphabet and 1 Number');
    };
</script>
<script type="text/javascript" src="../javascripts/returnhome.js"></script>
</body>
</html>

